{% extends "oj_base.html" %}
{% block title %}
    更换头像
{% endblock %}
{% block body %}
    <div class="container main">

        <div class="col-lg-2">
            <ul class="list-group">
                <li class="list-group-header">通用设置</li>
                <li class="list-group-item"><a href="/account/settings/">个人信息</a></li>
                <li class="list-group-item active"><a href="/account/settings/avatar/">更换头像</a></li>
                <li class="list-group-item"><a href="/two_factor_auth/">两步验证</a></li>
                <li class="list-group-item"><a href="/change_password/">修改密码</a></li>
            </ul>
        </div>
        <div class="col-lg-3">
            <img src="{{ user.userprofile.avatar }}" class="img-responsive big-avatar" id="current-avatar">
            <br>
            <div class="form-group left">
                <button id="save-avatar" type="submit" class="btn btn-primary">保存</button>
            </div>
        </div>
        <div class="col-lg-6">
            <h3>选择已有头像</h3>
            <div>
                <div class="row">
                    {% for i in "aaaaaaaaaaaaaaaaaaaa" %}
                        <div class="col-lg-2 avatar-item">
                            <div>
                                <img src="/static/img/avatar/avatar-{{ forloop.counter }}.png" style="cursor:pointer">
                            </div>
                        </div>
                    {% endfor %}

                </div>

                <div title="Coding.net 是深圳市扣钉网络科技有限公司打造的国内最大的一站式云端开发平台，提供包括代码托管，项目管理，产品演示，WebIDE 等工具。">
                    <img src="https://coding.net/static/d0aa9dd75e2500930b9e6ef61d9bcfa0.jpg"
                         style="height: 100px;width: 150px">
                    水果头像由<a href="https://coding.net">coding.net</a>提供。
                </div>


            </div>
            <h3>上传自定义头像</h3>
            <div id="avatarUploader">选择头像</div>
        </div>
    </div>
{% endblock %}

{% block js_block %}
    <script src="/static/js/app/oj/account/avatar.js"></script>
{% endblock %}
